<script setup lang="ts">
	import { ref, computed } from "vue";
	// import sheep from '@/sheep';
	
	// const userInfo = computed(() => sheep.$store('user').userInfo);
	const qrCodeShow = ref<Boolean>(false)
	
	let props = defineProps({
		size:{
			type: Number,
			default: 200
		},
		val:{
			type: String,
			default: ''
		},
		icon:{
			type: String,
			default: ''
		},
		// qrCodeShow:{
		// 	type: Boolean,
		// 	default: false
		// }
	})
	defineExpose({onChangeShowHandler})
	function onChangeShowHandler(val: boolean){
		if(val){
			qrCodeShow.value = val
		}
		else{
			qrCodeShow.value = !qrCodeShow.value
		}
	}
	
</script>

<template>
	<up-popup :show="qrCodeShow" mode="center" :closeable="true" :round="10" @close="onChangeShowHandler">
		<view class="qrContainer">
			<up-qrcode :size="props.size" :val="props.val" :icon="props.icon" @tap="onChangeShowHandler"></up-qrcode>
			<span class="qrInfo">{{props.val}}</span>
			<up-divider></up-divider>
			<span class="qrInfo">邀请伙伴成为共同养护人</span>
		</view>
	</up-popup>
</template>

<style lang="scss">
	.qrContainer {
		width: auto;
		padding: 80rpx; 
		margin-top: 40rpx;
		display: flex; 
		flex-direction: column; 
		justify-content: center; 
		.qrInfo{
			width: 100%;
			text-align: center;
		}
	}
</style>
